<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-29 16:42:02
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-30 10:20:41
 * @FilePath: \ProtocolTool\src\renderer\src\views\Manual\Socket\DeviceControl.vue
-->
<script lang="ts" setup>
import { ref } from 'vue'
import TextDataBox from '@/components/TextDataBox/index.vue'
import Status from '@/components/TestStatus/index.vue'
import Simplebar from 'simplebar-vue'
import 'simplebar-vue/dist/simplebar.min.css'
import { message } from 'ant-design-vue'
import { socketDeviceCtrlAPI } from '@/api/Manual'

const props = defineProps({
  device: String
})

const status = ref('')
const loadingA = ref<any>(false)
const loadingB = ref<any>(false)
const loadingC = ref<any>(false)
const loadingD = ref<any>(false)
const loadingE = ref<any>(false)
const loadingF = ref<any>(false)
const list = ref<any>([])
const formRef = ref()
const form = ref<any>({
  clientId: '',
  command: '',
  parameter: ''
})
const rules = {
  parameter: {
    required: true,
    validator: (_rule, value) => {
      if (!value) {
        if (form.value.command === 'rnp') {
          return Promise.reject('请输入固件更新代码')
        } else if (form.value.command === 'ctl') {
          return Promise.reject('请输入自定义控制指令')
        } else {
          return Promise.reject('请输入')
        }
      } else {
        return Promise.resolve()
      }
    },
    trigger: 'change'
  }
}

const open = ref(false)
const title = ref('')

// 更新固件
const update = () => {
  if (!props.device) {
    message.error('请选择设备')
    return
  }
  form.value.command = 'rnp'
  form.value.parameter = ''
  title.value = '更新固件'
  open.value = true
}
// 重启
const restart = () => {
  if (!props.device) {
    message.error('请选择设备')
    return
  }
  form.value.clientId = props.device
  form.value.command = 'rbt'
  form.value.parameter = ''
  status.value = ''
  loadingB.value = true
  socketDeviceCtrlAPI(form.value)
    .then((res) => {
      status.value = res.data.resultStatus === 200 ? 'success' : 'fail'
      list.value.unshift({
        id: list.value.length ? list.value[0].id + 1 : 1,
        itemId: res.data.itemId,
        time: Date.now(),
        data: res.data.responseData ? res.data.responseData.replaceAll('\n', '<br/>') : 'null',
        requestData: res.data.requestData ? res.data.requestData.replaceAll('\n', '<br/>') : 'null',
        msg: res.data.result,
        resultStatus: res.data.resultStatus
      })
    })
    .finally(() => {
      loadingB.value = false
    })
}
// 复位
const reset = () => {
  if (!props.device) {
    message.error('请选择设备')
    return
  }
  form.value.clientId = props.device
  form.value.command = 'rst'
  form.value.parameter = ''
  status.value = ''
  loadingC.value = true
  socketDeviceCtrlAPI(form.value)
    .then((res) => {
      status.value = res.data.resultStatus === 200 ? 'success' : 'fail'
      list.value.unshift({
        id: list.value.length ? list.value[0].id + 1 : 1,
        itemId: res.data.itemId,
        time: Date.now(),
        data: res.data.responseData ? res.data.responseData.replaceAll('\n', '<br/>') : 'null',
        requestData: res.data.requestData ? res.data.requestData.replaceAll('\n', '<br/>') : 'null',
        msg: res.data.result,
        resultStatus: res.data.resultStatus
      })
    })
    .finally(() => {
      loadingC.value = false
    })
}
// 调零
const zero = (param) => {
  if (!props.device) {
    message.error('请选择设备')
    return
  }
  form.value.clientId = props.device
  form.value.command = 'adj'
  form.value.parameter = param
  status.value = ''
  loadingD.value = true
  socketDeviceCtrlAPI(form.value)
    .then((res) => {
      status.value = res.data.resultStatus === 200 ? 'success' : 'fail'
      list.value.unshift({
        id: list.value.length ? list.value[0].id + 1 : 1,
        itemId: res.data.itemId,
        time: Date.now(),
        data: res.data.responseData ? res.data.responseData.replaceAll('\n', '<br/>') : 'null',
        requestData: res.data.requestData ? res.data.requestData.replaceAll('\n', '<br/>') : 'null',
        msg: res.data.result,
        resultStatus: res.data.resultStatus
      })
    })
    .finally(() => {
      loadingD.value = false
    })
}
// 自校准
const adjust = (param) => {
  if (!props.device) {
    message.error('请选择设备')
    return
  }
  form.value.clientId = props.device
  form.value.command = 'cal'
  form.value.parameter = param
  status.value = ''
  loadingE.value = true
  socketDeviceCtrlAPI(form.value)
    .then((res) => {
      status.value = res.data.resultStatus === 200 ? 'success' : 'fail'
      list.value.unshift({
        id: list.value.length ? list.value[0].id + 1 : 1,
        itemId: res.data.itemId,
        time: Date.now(),
        data: res.data.responseData ? res.data.responseData.replaceAll('\n', '<br/>') : 'null',
        requestData: res.data.requestData ? res.data.requestData.replaceAll('\n', '<br/>') : 'null',
        msg: res.data.result,
        resultStatus: res.data.resultStatus
      })
    })
    .finally(() => {
      loadingE.value = false
    })
}
// 自定义控制
const customCtrl = () => {
  if (!props.device) {
    message.error('请选择设备')
    return
  }
  form.value.command = 'ctl'
  form.value.parameter = ''
  title.value = '自定义控制'
  open.value = true
}

const handleOk = () => {
  formRef.value.validate().then(() => {
    open.value = false
    if (form.value.command === 'rnp') {
      loadingA.value = true
    } else if (form.value.command === 'ctl') {
      loadingF.value = true
    }
    form.value.clientId = props.device
    status.value = ''
    socketDeviceCtrlAPI(form.value)
      .then((res) => {
        status.value = res.data.resultStatus === 200 ? 'success' : 'fail'
        list.value.unshift({
          id: list.value.length ? list.value[0].id + 1 : 1,
          itemId: res.data.itemId,
          time: Date.now(),
          data: res.data.responseData ? res.data.responseData.replaceAll('\n', '<br/>') : 'null',
          requestData: res.data.requestData
            ? res.data.requestData.replaceAll('\n', '<br/>')
            : 'null',
          msg: res.data.result,
          resultStatus: res.data.resultStatus
        })
      })
      .finally(() => {
        if (form.value.command === 'rnp') {
          loadingA.value = false
        } else if (form.value.command === 'ctl') {
          loadingF.value = false
        }
      })
  })
}
</script>
<template>
  <div>
    <div>
      <div class="title">设备控制</div>
      <div class="desc">
        通过指令的方式控制地球物理专用设备，包括更新固件、重启、复位、调零、自校准、自定义控制等功能。
      </div>
    </div>

    <div class="content">
      <div class="left">
        <div class="result">
          <div class="result-title">测试结果</div>
          <div class="result-value">
            <Status :status />
          </div>
        </div>
        <Simplebar class="info">
          <div class="form">
            <a-form layout="vertical">
              <a-form-item label="设备固件">
                <a-button type="primary" :loading="loadingA" @click="update">更新固件</a-button>
              </a-form-item>
              <a-form-item label="调零">
                <a-radio-group :disabled="loadingD">
                  <a-radio-button value="on" @click="zero('on')">开</a-radio-button>
                  <a-radio-button value="off" @click="zero('off')">关</a-radio-button>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="自校准">
                <a-radio-group :disabled="loadingE">
                  <a-radio-button value="on" @click="adjust('on')">开</a-radio-button>
                  <a-radio-button value="off" @click="adjust('off')">关</a-radio-button>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="其它控制">
                <div>
                  <a-button type="primary" :loading="loadingB" @click="restart">重启</a-button>
                  <a-button type="primary" class="ml15" :loading="loadingC" @click="reset">
                    复位
                  </a-button>
                </div>
                <!-- <div class="mt15">
                  <a-button type="primary" :loading="loadingD" @click="zero">调零</a-button>
                  <a-button type="primary" class="ml15" :loading="loadingE" @click="adjust">
                    自校准
                  </a-button>
                </div> -->
              </a-form-item>
              <div class="line"></div>
              <a-form-item label="自定义">
                <a-button type="primary" :loading="loadingF" @click="customCtrl">
                  自定义控制
                </a-button>
              </a-form-item>
            </a-form>
          </div>
        </Simplebar>
      </div>

      <div class="right">
        <div class="data-box" style="height: 434px">
          <TextDataBox :list />
        </div>
      </div>
    </div>

    <a-modal v-model:open="open" :title @ok="handleOk">
      <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
        <a-form-item v-if="form.command === 'adj' || form.command === 'cal'" name="parameter">
          <a-radio-group v-model:value="form.parameter" button-style="solid">
            <a-radio-button value="on">开启</a-radio-button>
            <a-radio-button value="off">关闭</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-if="form.command === 'rnp'" label="固件代码" name="parameter">
          <a-textarea v-model:value="form.parameter" :auto-size="{ minRows: 3, maxRows: 5 }" />
        </a-form-item>
        <a-form-item v-if="form.command === 'ctl'" label="控制指令" name="parameter">
          <a-textarea v-model:value="form.parameter" :auto-size="{ minRows: 3, maxRows: 5 }" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<style lang="less" scoped>
.title {
  font-weight: 500;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.88);
  line-height: 28px;
}

.desc {
  font-weight: 400;
  font-size: 14px;
  color: #909399;
  line-height: 22px;
  margin: 6px 0 16px;
}

.content {
  display: flex;

  .left {
    width: 200px;

    .result {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid #d9d9d9;

      &-title {
        font-weight: 600;
        font-size: 16px;
      }

      &-value {
        width: 90px;
        height: 28px;
      }
    }

    .data-title {
      line-height: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .name {
        font-size: 16px;
      }

      .time {
        font-size: 12px;
        color: #a8abb2;
      }
    }

    .info {
      background: #ffffff;
      border-radius: 4px;
      width: 200px;
      height: 386px;
      overflow-x: hidden;
      overflow-y: auto;
      margin-top: 6px;
      background: #ffffff;
      border-radius: 4px;

      .ml15 {
        margin-left: 15px;
      }

      .mt15 {
        margin-top: 15px;
      }
    }
  }

  .right {
    margin-left: 10px;
    flex: 1;

    ::v-deep(.ant-btn) {
      height: 28px;
      padding: 2px 8px;
    }
  }
}
.ant-btn-primary {
  background-color: rgb(0, 185, 107);
}
.ant-btn-primary:not(:disabled):hover {
  color: #fff;
  background-color: #139937;
}
.ant-btn-default:not(:disabled):hover {
  color: #1a8c35;
  border-color: #139937;
}
</style>
